<template>
  <div>
    <a-spin :spinning="spinning" :delay="delayTime" size="large">
      <div style="margin-bottom:20px">
        <!-- 疫情统计 -->
        <div class="epidemicStatistics">
          <myTitle name="国内疫情统计" 
          :showTime="true" 
          :showReload="true"
          :time="countryData.time" 
          @reloadData="reloadData"></myTitle>
          <div style="padding:10px">
            <statistics :countryData="countryData"></statistics>
          </div>
        </div>

        <!-- 国内地图 -->
        <div class="ChinaMap" style="position: relative;">
          <myTitle name="国内地图"></myTitle>
          <fillCountry :ProvinceData="ProvinceData"></fillCountry>
          <correspondingBar style="position: absolute;bottom:0px; left:5px;z-index:99" :color="countryColor"></correspondingBar>
        </div>

        <div class="epidemicStatistics">
          <myTitle name="全球疫情统计" 
          :showTime="true" 
          :showReload="true"
          :time="countryData.time" 
          @reloadData="reloadData"></myTitle>
          <div style="padding:10px">
            <statistics :countryData="total" :showDoubtful="false"></statistics>
          </div>
        </div>
        <!-- 国外地图 -->
        <div class="foreignMap" style="position: relative;">
          <myTitle name="国外地图"></myTitle>
          <fillWorld :worldData="worldData"></fillWorld>
          <correspondingBar style="position: absolute;bottom:0px;left:5px; z-index:99" :color="worldColor"></correspondingBar>
        </div>
      </div>

    </a-spin>
  </div>
</template>

<script>

import myTitle from '@/components/title/index'
import fillCountry from '@/components/fillMap/country/index'
import fillWorld from '@/components/fillMap/world/index'
import statistics from '@/components/statistics/index'
import correspondingBar from '@/components/correspondingBar/index'
import { getCovid19Data, reloadCovid19Data, getWorldCovid19Data } from '@/api/covid19Data.js'

export default {
  components:{
    myTitle,
    fillCountry,
    fillWorld,
    statistics,
    correspondingBar
  },
  data(){
    return{
      countryData:{},
      ProvinceData: [],
      worldData:[],
      countryColor: [],
      worldColor: [],
      spinning: false,
      delayTime: 1000,
      total:{
        totalIncrease: 0,
        totalConfirmed: 0,
        totalDeath: 0,
        totalCured: 0,
      }
    }
  },

  created(){
    this.onLoadData(),
    this.onLoadWorldData()
  },

  methods:{

    //从缓存中加载国内数据
    async onLoadData(){
      this.spinning = true
      let mainData = {}
      try {
        let response = await getCovid19Data(mainData)
        this.countryData = response.data.data.country
        this.ProvinceData = response.data.data.provinceArray
        this.countryColor = response.data.data.color
        console.log(this.countryColor)
        this.spinning = false
      } catch (error) {
        console.log(error)
      }
    },

    //从缓存中加载世界数据
    async onLoadWorldData(){
      this.spinning = true
      let mainData = {}
      try {
        let response = await getWorldCovid19Data(mainData)
        this.worldData = response.data.data.data
        this.worldColor = response.data.data.color
        this.totalWorld(this.worldData)
        this.spinning = false
      } catch (error) {
        console.log(error)
      }
    },

    // 更新数据
    async reloadData(){
      this.spinning = true
      let mainData = {}
      try {
        
        let response = await reloadCovid19Data(mainData)
        this.countryData = response.data.data.country
        this.ProvinceData = response.data.data.provinceArray
        this.onLoadData(),
        this.onLoadWorldData(),
        this.spinning = false
        this.$message.success('刷新成功');
      } catch (error) {
        console.log(error)
        this.spinning = false
        this.$message.error('阿里接口繁忙');
      }
    },


    //统计全球数据
    totalWorld(data){
      data.forEach( item =>{
        this.total.totalIncrease += item.confirmAdd
        this.total.totalConfirmed += item.confirm
        this.total.totalDeath += item.dead
        this.total.totalCured += item.heal
      })
    },
   


  }
}
</script>

<style scoped>
.ant-card:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    cursor: pointer;
}







</style>